import { Component, PropsWithChildren } from 'react'
import { View, Text, Button, Input, Image } from '@tarojs/components'
import { AtIcon } from "taro-ui"
import ImgUrl from '../../picture/phone.png'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  value: string
  constructor(props) {
    super(props)
    this.value = ''
  }
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  onClick() {
    Taro.navigateBack()
  }
  handleChange() {

  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>联系客服</Text>
          </View>
        </View>
        <View className='message'>
          <View className='contact'>
            <View className='phone'>400 788 7888</View>
            <View className='address'>上海</View>
          </View>
          <View className='list1'>
            <View className='icon'>
              <AtIcon value='add' size='30' color='#000'></AtIcon>
              <View>新建联系人</View>
            </View>
            <View className='icon'>
              <AtIcon value='user' size='30' color='#000'></AtIcon>
              <View>保存至已有联系人</View>
            </View>
            <View className='icon'>
              <AtIcon value='video' size='30' color='#000'></AtIcon>
              <View>视频呼叫</View>
            </View>
            <View className='icon'>
              <AtIcon value='message' size='30' color='#000'></AtIcon>
              <View>发送信息</View>
            </View>
          </View>
          <Image className='tele' src={ImgUrl} />
          <View className='list2'>
            <View className='icon'>
              <AtIcon value='phone' size='30' color='#09f'></AtIcon>
              <View style={{ color: '#08f' }}>电话</View>
            </View>
            <View className='icon'>
              <AtIcon value='user' size='30' color='#000'></AtIcon>
              <View>联系人</View>
            </View>
            <View className='icon'>
              <AtIcon value='star' size='30' color='#000'></AtIcon>
              <View>收藏</View>
            </View>
          </View>
        </View>
      </View >
    )
  }
}
